<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新视频</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom:40px" finish-status="success">
      <el-step title="填写视频基本信息"></el-step>
      <el-step title="创建视频大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <el-form label-width="120px">
      <el-form-item label="视频标题">
        <el-input v-model="courseInfo.title" placeholder="机器学习项目课"></el-input>
      </el-form-item>
      <el-form-item label="视频分类">
        <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged">
          <el-option v-for="subject in subjectOneList" :key="subject.id" :label="subject.title" :value="subject.id" />
        </el-select>
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option v-for="subject in subjectTwoList" :key="subject.id" :label="subject.title" :value="subject.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="视频作者">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name" :value="teacher.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right"
          plalceholder="请填写视频的总课时"></el-input-number>
      </el-form-item>
      <el-form-item label="视频简介">
        <tinymce :height="300" v-model="courseInfo.description" />
      </el-form-item>
      <el-form-item label="视频封面">
        <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
          :action="BASE_API + '/eduoss/fileoss'" class="avatar-uploader">
          <img :src="courseInfo.cover" width="400px" height="200px" />
        </el-upload>
      </el-form-item>
      <el-form-item label="视频价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right"
          placeholder="免费视频请填0元"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      saveBtnDisabled: false,
      courseInfo: {
        title: '',
        subjectId: '',
        subjectParentId: '',
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '',
        price: 0
      },
      teacherList: [],
      subjectOneList: [],
      subjectTwoList: [],
      courseId: '',
      BASE_API: process.env.BASE_API,
    };
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id
      this.getInfo()

    } else {
      this.getListTeacher()
      this.getOneSubject()
    }

  },
  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  methods: {
    init() {
      //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      } else { //路径没有id值，做添加
        //清空表单
        this.courseInfo = {}
      }
    },
    getInfo() {
      course.getCourseInfoId(this.courseId)
        .then(response => {
          this.courseInfo = response.data.courseInfoVo
          subject.getSubjectList()
            .then(response => {
              this.subjectOneList = response.data.list
              for (var i = 0; i < this.subjectOneList.length; i++) {
                var oneSubject = this.subjectOneList[i]
                if (this.courseInfo.subjectParentId === oneSubject.id) {
                  this.subjectTwoList = oneSubject.children
                }
              }
            })
          this.getListTeacher()
        })
    },
    handleAvatarSuccess(res, file) {
      this.courseInfo.cover = res.data.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能JPG格式！')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过2MB！')
      }
      return isJPG && isLt2M
    },
    subjectLevelOneChanged(value) {
      // value就是一级分类id
      // 遍历所有的分类（包含一级和二级）
      for (var i = 0; i < this.subjectOneList.length; i++) {
        var oneSubject = this.subjectOneList[i]
        if (value === oneSubject.id) {
          this.subjectTwoList = oneSubject.children
          this.courseInfo.subjectId = ''
        }
      }
    },
    getOneSubject() {
      subject.getSubjectList()
        .then(response => {
          this.subjectOneList = response.data.list
        })
    },
    getListTeacher() {
      course.getListTeacher()
        .then(response => {
          this.teacherList = response.data.items
        })
    },
    addCourse() {
      course.addCourseInfo(this.courseInfo)
        .then(response => {
          // 提示
          this.$message({
            type: 'success',
            message: '添加视频信息成功！'
          });
          // 跳转到第二步
          this.$router.push({ path: '/course/chapter/' + response.data.courseId })
        })
    },
    updateCourse() {
      course.updateCourseInfo(this.courseInfo)
        .then(response => {
          // 提示
          this.$message({
            type: 'success',
            message: '修改视频信息成功！'
          });
          // 跳转到第二步
          this.$router.push({ path: '/course/chapter/' + this.courseId })
        })
    },
    saveOrUpdate() {
      if (!this.courseInfo.id) {
        this.addCourse()
      } else {
        this.updateCourse()
      }

    }
  }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>
